<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body>

	<!--
@desc 预警触发 添加
@author WeiXiaoJin
@since 2020-01-26 09:30:11
-->
	<div layout:fragment="content">
		<div class="container-fluid content-main">
			<div class="animated fadeIn">
				<div class="row">
					<!-- /.col-->
					<div class="col-sm-12">
						<div class="card">
							<div class="card-body">
								<form class="form-horizontal" id="addForm">
									
									<input type="hidden" name="applicationName" value="applicationName" />	
									<input type="hidden" name="alarmEventType" th:value="${param.alarmEventType}" />	
								
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">触发器名称</label>
										<div class="col-md-9">
											<input class="form-control" id="triggerName" type="text"
												name="triggerName" placeholder="触发器名称">
										</div>
									</div>
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label" for="text-input">级别</label>
										<div class="col-md-9">
											<input class="form-control" id="triggerSeverity" type="text" name="triggerSeverity" placeholder="级别">
										</div>
									</div>
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label" for="text-input">通知类型</label>
										<div class="col-md-9">
											<label class="checkbox-inline">
												<input type="checkbox" name="triggerType" value="email" id="triggerType-email">邮件
											</label>
											<label class="checkbox-inline">
												<input type="checkbox" name="triggerType" value="sms" id="triggerType-sms">短信
											</label>
											<label class="checkbox-inline">
												<input type="checkbox" name="triggerType" value="dingtalk" id="triggerType-dingtalk">钉钉
											</label>
											<label class="checkbox-inline">
												<input type="checkbox" name="triggerType" value="wechat" id="triggerType-wechat">微信
											</label>
										</div>
									</div>
									
									<!-- >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 通知值_start >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->	
									<div class="form-group row hidden" id="notice-email">
										<label class="col-md-2 col-form-label control-label" for="text-input">通知邮箱</label>
										<div class="col-md-9">
											<input class="form-control" id="noticeEmail" type="text" name="noticeEmail" placeholder="通知邮箱">
										</div>
									</div>
									<div class="form-group row hidden" id="notice-sms">
										<label class="col-md-2 col-form-label control-label" for="text-input">通知短信</label>
										<div class="col-md-9">
											<input class="form-control" id="noticeSms" type="text" name="noticeSms" placeholder="通知短信">
										</div>
									</div>
									<div class="form-group row hidden" id="notice-dingtalk">
										<label class="col-md-2 col-form-label control-label" for="text-input">通知钉钉</label>
										<div class="col-md-9">
											<input class="form-control" id="noticeDingtalk" type="text" name="noticeDingtalk" placeholder="通知钉钉(webhook)，非必须">
										</div>
									</div>
									<div class="form-group row hidden" id="notice-wechat">
										<label class="col-md-2 col-form-label control-label" for="text-input">通知微信</label>
										<div class="col-md-9">
											<input class="form-control" id="noticeWechat" type="text" name="noticeWechat" placeholder="通知微信(webhook)，非必须">
										</div>
									</div>
									<!-- >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 通知值_end >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->	
									
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">时间段</label>
										<div class="col-md-4">
											<div class="input-group date">
												<span class="input-group-addon"><i
													class="fa fa-calendar"></i></span> <input type="text"
													class="form-control time-input" id="laydate-demo-4"
													name="startTime" data-type="datetime"
													data-format="yyyy-MM-dd HH:mm:ss"
													placeholder="yyyy-MM-dd HH:mm:ss" lay-key="4">
											</div>
										</div>
										<div class="col-md-4">
											<div class="input-group date">
												<span class="input-group-addon"><i
													class="fa fa-calendar"></i></span> <input type="text"
													class="form-control time-input" id="laydate-demo-3"
													name="endTime" data-type="datetime"
													data-format="yyyy-MM-dd HH:mm:ss"
													placeholder="yyyy-MM-dd HH:mm:ss" lay-key="3">
											</div>
										</div>
									</div>
									
									<!-- 
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">结束时间</label>
										<div class="col-md-9">
											<div class="input-group date">
												<span class="input-group-addon"><i
													class="fa fa-calendar"></i></span> <input type="text"
													class="form-control time-input" id="laydate-demo-3"
													name="endTime" data-type="datetime"
													data-format="yyyy-MM-dd HH:mm:ss"
													placeholder="yyyy-MM-dd HH:mm:ss" lay-key="3">
											</div>
										</div>
									</div>
									 -->
									 
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">预警次数</label>
										<div class="col-md-4">
											<input class="form-control" id="continueTime" type="text" value="3"
												name="continueTime" placeholder="预警次数">
										</div>
									</div>
								
									<!-- 
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">类名</label>
										<div class="col-md-7">
											<input class="form-control" id="className" type="text"
												name="className" 
												placeholder="类名">
										</div>
									</div>
									 -->	
									
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">触发事件</label>
										<div class="col-md-9">
											<input class="form-control" id="webhook" type="text" name="webhook" placeholder="触发事件">
										</div>
									</div>
									
									<div class="form-group row condation-list condition-row">
										<label class="col-md-2 col-form-label control-label" for="text-input">触发条件</label>
										<div class="col-md-2">
											<select class="form-control" name="conditionName">
												<option th:each="i:${@watcherPageHandle.settings(param.ruleType)}" th:value="${i.keyValue}" th:text="${i.keyName}"></option>
											</select>
										</div>
										<div class="col-md-1">
											 <select class="form-control" name="conditionSpel">
												<option th:each="i:${@watcherPageHandle.settings('condition_type')}" th:value="${i.keyValue}" th:text="${i.keyName}"></option>
											</select>
										</div>
										<div class="col-md-5">
											<input class="form-control" id="triggerValue" type="text" name="conditionValue" placeholder="触发阀值">
										</div>
										<div class="col-md-1">
											<a class="btn" href="javascript:void(0)" onclick="addCondition()"><i class="fa fa-plus"></i> 添加</a> 
										</div>
									</div>
									
									<!-- 
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">触发关键字</label>
										<div class="col-md-9">
											<input class="form-control" id="triggerKeywork" type="text"
												name="triggerKeywork" placeholder="触发关键字">
										</div>
									</div>
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">触发阀值</label>
										<div class="col-md-9">
											<input class="form-control" id="triggerValue" type="text"
												name="triggerValue" placeholder="触发阀值">
										</div>
									</div>
									 -->
								</form>
							</div>
						</div>
					</div>
					<!-- /.col-->
				</div>
			</div>
		</div>
		
		<div style="display:none" class="condation-html">
			<div class="form-group row condation-list">
				<label class="col-md-2 col-form-label control-label"
					for="text-input">触发条件</label>
				<div class="col-md-2">
					 <select class="form-control" name="conditionName">
						<option th:each="i:${@watcherPageHandle.settings(param.ruleType)}" th:value="${i.keyValue}" th:text="${i.keyName}"></option>
					</select>
				</div>
				<div class="col-md-1">
					 <select class="form-control" name="conditionSpel">
						<option th:each="i:${@watcherPageHandle.settings('condition_type')}" th:value="${i.keyValue}" th:text="${i.keyName}"></option>
					</select>
				</div>
				<div class="col-md-5">
					<input class="form-control" id="conditionValue" type="text" name="conditionValue" placeholder="触发阀值">
				</div>
				<div class="col-md-1">
					<a class="btn" style="color:red" href="javascript:void(0)" onclick="removeCondition(this)"><i class="far fa-trash-alt"></i> 删除</a> 
				</div>
			</div>
		</div>	

	</div>

	<footer th:replace="dashboard/footer :: footer"></footer>

	<script type="text/javascript" th:inline="javascript">
	
		var addForm = $("#addForm");
		var maxRule = [[${@watcherPageHandle.settings(param.ruleType).size()}]] ;
		
		$(function() {
			
			$("input[name=triggerType]").change(function(){
				var checked = $(this).is(':checked'); 
				var v = $(this).val() ;
				
				if(checked) {
					$("#notice-"+v).removeClass("hidden") ;
				} else {
					$("#notice-"+v).addClass("hidden") ;
				}
			}) ; 
			
			addForm.validate({
				ignore : [],
				rules : {
					triggerName : {required : true},
					triggerSeverity : {required : true},
					triggerType : {required : false},
					startTime : {required : true,date : true},
					endTime : {required : true,date : true},
					continueTime : {required : true,number : true},
					className : {required : true},
					triggerKeywork : {required : true},
					triggerValue : {required : true}
				}
			});
		});

		function submitHandler() {
			var result = $.validate.form("addForm");
			if (result) {
				var saveUrl = ctx + "base/logger/logTrigger/saveTrigger";
				$.operate.save(saveUrl, addForm.serialize());
			}
		}
		
		// 添加类规则
		function addCondition(){
			var size = $(".condation-list").length ; 
			if(size == (maxRule+1)){
				$.modal.msg("触发条件最多不能超过"+maxRule+"个") ;
				return ;	
			}
			var html = $(".condation-html").html() ; 
			$(".condition-row").after(html) ; 
		}
		
		function removeCondition(self){
			$(self).parent().parent().remove() ;
		}
	</script>

</body>
</html>


